<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/artist.css" />
		<link rel="stylesheet" type="text/css" href="../css/pullToRefresh.css"/>
		<link rel="stylesheet" type="text/css" href="../css/scrollToTop.css"/>
    </head>

    <body>
    	<!--返回顶部-->
		<a id="scrollToTop" class="backTop hide">
		    <i class="iconfont">&#xe602;</i>
		</a>
		<!--清空所有条件 借用scrollToTop.css-->
		<a id="clear" class="backTop hide">
		    <i class="iconfont">&#xe6c0;</i>
		</a>
        <div class="mui-content">
            <div class="mui-scroll-wrapper" id="pullrefresh">
                <div class="mui-scroll" id="scroll-main">
                	<div class="filter-bar">
						<a class="filter-item" id="filteritem1" href="#filterbody1">
							<span class="filter-value">全部帮办</span>
							<span class="mui-icon mui-icon-arrowdown"></span>
						</a>
						<a class="filter-item" id="filteritem2" href="#filterbody2">
							<span class="filter-value">综合排序</span>
							<span class="mui-icon mui-icon-arrowdown"></span>
						</a>
						<div class="filter-item sex" id="filteritem3" value="0">
							<span value="1">男<i class="iconfont">&#xe60a;</i></span>
							<span value="2">女<i class="iconfont">&#xe60a;</i></span>
						</div>
					</div>
					<div id="filterbody1" class="mui-popover" value="0">
						<div class="mui-popover-arrow"></div>
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll filterbody">
								<ul class="filter-body">
									<li class="mui-table-view-cell" value="0">
										<span class="filter-list-value">全部帮办</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="1">
										<span class="filter-list-value">搬家</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="2">
										<span class="filter-list-value">保姆</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="3">
										<span class="filter-list-value">维修</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="4">
										<span class="filter-list-value">摄影</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="5">
										<span class="filter-list-value">婚庆</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="6">
										<span class="filter-list-value">送餐</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="7">
										<span class="filter-list-value">服务员</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="8">
										<span class="filter-list-value">会场布置</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="9">
										<span class="filter-list-value">司仪驻唱</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="10">
										<span class="filter-list-value">礼仪模特</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="11">
										<span class="filter-list-value">传单派发</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="12">
										<span class="filter-list-value">游戏代练</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="13">
										<span class="filter-list-value">代驾</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="14">
										<span class="filter-list-value">代购</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="15">
										<span class="filter-list-value">同城跑腿</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="16">
										<span class="filter-list-value">更多帮办</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="filterbody2" class="mui-popover" value="0">
						<div class="mui-popover-arrow"></div>
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll filterbody">
								<ul class="filter-body">
									<li class="mui-table-view-cell" value="0">
										<span class="filter-list-value">综合排序</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="1">
										<span class="filter-list-value">完成数从高到低</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<!--<li class="mui-table-view-cell" value="2">
										<span class="filter-list-value">最受欢迎</span>
										<i class="iconfont">&#xe60a;</i>
									</li>-->
									<li class="mui-table-view-cell" value="3">
										<span class="filter-list-value">实名认证</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="4">
										<span class="filter-list-value">受欢迎度从高到低</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<!--<li class="mui-table-view-cell" value="5">
										<span class="filter-list-value">人气从低到高</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="6">
										<span class="filter-list-value">价格从高到低</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="7">
										<span class="filter-list-value">价格从低到高</span>
										<i class="iconfont">&#xe60a;</i>
									</li>-->
									<li class="mui-table-view-cell" value="5">
										<span class="filter-list-value">好评从高到低</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
								</ul>
							</div>
						</div>
					</div>
                    <ul class="mui-table-view" id="artist-list">
                    	<div class="backdrop"><!--遮罩层--></div>
						<!--<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<div class="artistImg mui-media-object mui-pull-left">
									<img src="../images/shuijiao.jpg">
									<span class="fans"><i class="iconfont">&#xe669;</i>4</span>
								</div>
								<div class="mui-media-body">
									<h5 class="artist-name">金池</h5>
									<p class="artist-icons">
										<img src="../images/icon/vip2.png"/>
										<i class="iconfont honesty-lv1">&#xe713;</i>
										<i class="iconfont auth">&#xe605;</i>
									</p>
									<p class="artist-deal">已成交<span class="deal-count">55</span>笔</p>
									<p class="artist-type mui-ellipsis">流行歌手-电影-电视剧-广告-流行歌手-电影-电视剧-广告</p>
									<span class="artist-location">北京</span>
									<span class="artist-price">面议</span>
								</div>
							</a>
						</li>-->
                    </ul>
                </div>
            </div>
        </div>
    </body>
    <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/scrollToTop.js" type="text/javascript" charset="utf-8"></script>
    <script>
    	mui.plusReady(function() {
    		var pullRefresh;
    		var artistFilter = Common.defaultArtistFilter;
    		var artistList = document.getElementById("artist-list");
	        var self = plus.webview.currentWebview();
	        var clearbtn = document.getElementById("clear");
    		var firstShow = false; // 页面是否第一次加载
    		var indexPage = plus.webview.getLaunchWebview();
    		var notFound = null; // 筛选为空
	        mui.init();
	        self.addEventListener('show', function() {
		        // 第一次显示此页则自动加载列表
	        	if(!firstShow) {
					pullRefresh.pullDownLoading(); 
	        	}
	        	firstShow = true;
	        })
	        
	        // 离开此页时，收起筛选菜单，隐藏遮罩层
	        self.addEventListener('hide', function() {
	        	mui('.mui-popover').popover('hide');
	        	$backdrop.hide();
	        })
	        
	        mui('.mui-scroll-wrapper').scroll({
	            bounce: false,
	            indicators: true, //是否显示滚动条
	            deceleration: 0.01
	        });
	        
	        mui.ready(function() {
	            // 初始化下拉刷新，上拉加载。
	           	pullRefresh =  mui('#scroll-main').pullToRefresh({
	                down: {
	                    callback: pulldownRefresh
	                },
	                up: {
	                    callback: pullupRefresh
	                }
	            });
	        });
	        
	        // 首页点击艺人分类进入此页
	        document.addEventListener('artistFilter', function() {
				var type = JSON.parse(plus.storage.getItem('artistFilter')).type;
				var thisCell = $('#filterbody1 .mui-table-view-cell[value=' + type + ']');
				thisCell.find('i').show().end().siblings().find('i').hide();
				$("#filteritem1 .filter-value").text(Common.artistType[type - 1]);
				$("#filterbody1").attr('value', type);
				setTimeout(function() {
					pullRefresh.pullDownLoading();
					$(clearbtn).removeClass('hide');
				}, 500)
			})
	        
	        document.addEventListener('artistKey', function() {
				// 进行关键字搜索时，清空筛选、排序条件
				plus.storage.removeItem('artistFilter');
				resetPage();
				setTimeout(function() {
					pullRefresh.pullDownLoading();
					$(clearbtn).removeClass('hide');
				}, 650)
			})
	        
	        // 清空所有条件
	        mui('body').on('tap', '#clear', function() {
	        	// 清空搜索栏
	        	mui.fire(indexPage, 'clear', {});
	        	plus.storage.removeItem('artistFilter');
	        	plus.storage.removeItem('artistKey');
	        	resetPage();
	        	setTimeout(function() {
					pullRefresh.pullDownLoading();
					$(clearbtn).addClass('hide');
				}, 200)
	        	mui('#pullrefresh').scroll().scrollTo(0, 0, 500);
	        })
	        
	        // 筛选BEGIN==================================
	        var $backdrop = $(".backdrop");
	        mui(".filter-bar").on('tap', '#filteritem1,#filteritem2', function() {
	        	setTimeout(function() {
	        		if($("#filterbody1,#filterbody2").hasClass('mui-active')) {
	        		$backdrop.show();
		        	} else {
		        		$backdrop.hide();
		        	}
	        	},100)
	        })
	        
	        mui("#filteritem3").on('tap', 'span', function() {
	        	if($(this).find('i').is(':visible')) {
	        		$(this).find('i').hide();
	        		$(this).parent('#filteritem3').attr('value', 0);
	        	} else {
	        		$(this).find('i').show();
	        		$(this).siblings().find('i').hide();
	        		$(this).parent('#filteritem3').attr('value', $(this).attr('value'));
	        	}
	        	$backdrop.hide();
	        	mui('.mui-popover').popover('hide');
	        	changeFilter();
	        })
	        
	        mui(artistList).on('touchstart', '.backdrop', function() {
	        	$(this).hide();
	        	mui('.mui-popover').popover('hide');
	        	return false;
	        })
	        
	        mui("#filterbody1,#filterbody2").on('tap', '.mui-table-view-cell', function() {
	        	var parent = $(this).parents('.mui-popover')[0];
	        	$(this).find('i').show().end().siblings().find('i').hide();
	        	mui(parent).popover('hide');
	        	$backdrop.hide();
	        	$(parent.id == 'filterbody1' ? "#filteritem1" : "#filteritem2").find('.filter-value').text($(this).find('.filter-list-value').text());
	        	$(this).parents('.mui-popover').attr('value', this.value);
	        	changeFilter();
	        })
	        
	        function changeFilter() {
	        	// 进行筛选、排序时，清空搜索关键字
	        	plus.storage.removeItem('artistKey');
	        	mui.fire(indexPage, 'clear', {});
				artistFilter.type = Number($("#filterbody1").attr('value'));
				artistFilter.order = Number($("#filterbody2").attr('value'));
				artistFilter.gender = Number($("#filteritem3").attr('value'));
	        	plus.storage.setItem('artistFilter', JSON.stringify(artistFilter));
	        	//mui.toast('设置'+plus.storage.getItem('artistFilter'));
	        	pullRefresh.pullDownLoading();
	        }
	        
	        function resetPage() {
	        	mui('.mui-popover').popover('hide');
				$backdrop.hide();
				$("#filterbody1").attr('value', 0).find('li')
					.find('i').hide().end().first().find('i').show();
				$("#filterbody2").attr('value', 0).find('li')
					.find('i').hide().end().first().find('i').show();
				$("#filteritem1 .filter-value").text('全部帮办');
				$("#filteritem2 .filter-value").text('综合排序');
				$("#filteritem3").attr('value', 0).find('i').hide();
	        }
	        // 筛选END==================================
			
			// 初始化懒加载
			var lazyLoad = mui(artistList).imageLazyload({
				placeholder: '../images/holder1.png',
				autoDestroy: false
			});
			
			var viewPage = 1; // 当前显示艺人页数
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				console.log('artistFilter: ' + plus.storage.getItem('artistFilter'));
				console.log('artistKey: ' + plus.storage.getItem('artistKey'));
				viewPage = 1;
				// 筛选、排序为空时提示
				var hasFilter = false;
				var url = baseURL + 'artist/list.json';
				if(plus.storage.getItem('artistFilter')) {
					var data = JSON.parse(plus.storage.getItem('artistFilter'));
					if(data.type || data.order || data.gender) {
						hasFilter = true;
						$(clearbtn).removeClass('hide');
						console.log('帮办者筛选排序');
						url += Common.toURL(JSON.parse(plus.storage.getItem('artistFilter')));
					} else {
						$(clearbtn).addClass('hide');
					}
				} else {
					if(plus.storage.getItem('artistKey')) {
						hasFilter = true;
						$(clearbtn).removeClass('hide');
						console.log('帮办者关键字');
						url += '?key=' + plus.storage.getItem('artistKey');
					} else {
						$(clearbtn).addClass('hide');
					}
				}
				console.log(url);
				Common.ajax({
						url : url
					}, function(data) {
					console.log(JSON.stringify(data));
					$(artistList).find('.mui-table-view-cell').remove();
					if(data.length) {
						$(notFound).remove();
						$(artistList).show();
						$(".mui-pull-bottom-wrapper").show();
						for(var i = 0; i < data.length; i++) {
							var headSrc = Common.artistPic + data[i].id + '.jpg?' + Math.random();
							createArtistsList(data[i].id, data[i].stageName, data[i].v, data[i].honestyLevel,
								data[i].isAuth, headSrc, data[i].fanNum, data[i].completeNum, data[i].performanceType, data[i].city, (data[i].minSalary / 100).toFixed(0));
						}
					} else {
						if(hasFilter) {
							$(notFound).remove();
							notFound = Common.showState(artistList, '&#xe610;', '什么都没找到，换个条件试试吧', 30);
							$(".mui-pull-bottom-wrapper").hide();
						}
					}
					lazyLoad.refresh(true);
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				pullRefresh.refresh(true); // 重新激活上拉加载
				setTimeout(function() {
					pullRefresh.endPullDownToRefresh(); //refresh completed
				}, 500)
			}
			
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				var item;
				var url = baseURL + 'artist/list/' + (++viewPage) + '.json';
				console.log(url);
				Common.ajax({
						url : url
					}, function(data) {
					console.log(JSON.stringify(data));
					for(var i = 0; i < data.length; i++) {
						var headSrc = Common.artistPic + data[i].id + '.jpg?' + Math.random();
						createArtistsList(data[i].id, data[i].stageName, data[i].v, data[i].honestyLevel, 
							data[i].isAuth, headSrc, data[i].fanNum, data[i].completeNum, data[i].performanceType, data[i].city, (data[i].minSalary / 100).toFixed(0));
					}
					lazyLoad.refresh(true);
					pullRefresh.endPullUpToRefresh((data.length == 0)); //参数为true代表没有更多数据了。
				},function(xhr) {
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					mui.toast('网络异常，请稍后再试');
					pullRefresh.endPullUpToRefresh(true);
				})
			}
			
			/**
			 * @param {Object} id			艺人id
			 * @param {Object} name			艺人姓名
			 * @param {Object} vip			vip标志
			 * @param {Object} honesty		诚信等级
			 * @param {Object} auth			实名认证状态
			 * @param {Object} src			艺人头像路径
			 * @param {Object} fansCount	粉丝数量
			 * @param {Object} dealCount	成交数量
			 * @param {Object} type			艺人类型
			 * @param {Object} address		艺人所在城市
			 * @param {Object} price		艺人价格
			 */
			function createArtistsList(id, name, vip, honesty, auth, src, fansCount, dealCount, type, address, price) {
				var li = document.createElement('li');
				li.className = 'mui-table-view-cell mui-media';
				li.id = id;
				var liStr = '<a href="javascript:;"><div class="artistImg mui-media-object mui-pull-left"><img data-lazyload="' + src + '">';
				liStr += '<span class="fans"><i class="iconfont">&#xe669;</i> ' + fansCount + '</span></div><div class="mui-media-body">';
				liStr += '<h5 class="artist-name">' + name + '</h5><p class="artist-icons">';
				if(vip) {
					liStr += '<img src="../images/icon/vip2.png"/>';
				}
				liStr += '<i class="iconfont honesty-lv' + honesty + '">&#xe713;</i><i class="iconfont auth state';
				liStr += auth + '">&#xe605;</i></p><p class="artist-deal">已成交 <span class="deal-count">' + dealCount;
				liStr += '</span> 笔</p><p class="artist-type mui-ellipsis">' + type + '</p><span class="artist-location">' + address;
				liStr += '</span><span class="artist-price">' + (price ? '￥' + price : '面议') + '</span></div></a>';
				li.innerHTML = liStr;
				artistList.appendChild(li);
			}
			
			// 点击进入艺人详情
			mui(artistList).on('tap', '.mui-table-view-cell', function(e) {
				plus.nativeUI.showWaiting();
				Common.openWindow('artist-workroom.html',{artistId : this.id});
			});
		})
    </script>

</html>